<div id="app">
    <section class="content-header">
        <h1>
            <small>分类列表</small>
        </h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-header with-border">


                        <span>
   {{--<input type="checkbox" class="grid-select-all" />&nbsp;--}}
    <div class="btn-group">

    </div>
    <a class="btn btn-sm btn-primary grid-refresh" title="刷新"><i class="fa fa-refresh"></i><span class="hidden-xs"> 刷新</span></a>


  </span>
                    </div>




                    <!-- /.box-header -->
                    <!--数据列表开始   -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <thead >
                            <tr >
                                <th>分类id </th>
                                <th>分类名称</th>
                                <th>类目码名称</th>
                                <th>分类logo</th>
                                <th>是否删除</th>
                                <th>是否隐藏</th>
                                <th>所属渠道</th>
                                <th>分类级别</th>
                                <th>查看子类</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>

                            @if (!empty($list))
                                @foreach($list as $v)
                                    <tr id="tr{{$v['cate_id']}}"  class="trpid{{$v['pid']}}" >
                                        <td >
                                            {{ $v['cate_id'] }}
                                        </td>
                                        <td >
                                            {{$v['level_str']}}{{$v['cate_name']}}
                                        </td>
                                        <td >
                                            {{$v['cate_code']}}
                                        </td>
                                        <td >
                                            <img width="100" src="{{$v['cate_pic']}}">
                                        </td>
                                        <td >
                                            @if($v['is_del']==0)
                                                <span   style="color:blue;">否</span>
                                            @else
                                                <span   style="color:red;">是</span>
                                            @endif
                                        </td>
                                        <td >
                                            @if($v['is_hidden']==1)
                                                <span   style="color:blue;">否</span>
                                            @else
                                                <span   style="color:red;">是</span>
                                            @endif
                                        </td>

                                         <td >
                                           {{$v['cha_name']}}
                                         </td>
                                         <td >
                                             {{$v['level']}}
                                         </td>
                                        <td >
                                            @if($v['is_son']==0)
                                                <span onclick="showChild({{$v['cate_id']}})" class="showChild" style="border-radius:5px;padding:5px;background:#00a7d0;color:#f9f9f9" data-id="{{$v['cate_id']}}">查看子分类</span>
                                            @else
                                                <span style="border-radius:5px;padding:5px;background:#00a7d0;color:red;" data-id="{{$v['cate_id']}}">无子类</span>
                                            @endif

                                        </td>

                                        <td >
                                            <a href="/admin/category/edit?id={{$v['cate_id']}}">
                                                编辑
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                    <!--数据列表结束-->



                    <!-- /.box-body -->
                </div>
            </div>
        </div>

    </section>
</div>

<script data-exec-on-popstate>
    $(function () {
        $("#cha_id").val("@if(!empty($where['cha_id'])){{$where['cha_id']}}@endif");

        //tr选中样式控制
        $('.grid-row-checkbox').iCheck({checkboxClass:'icheckbox_minimal-blue'}).on('ifChanged', function () {
            if (this.checked) {
                $(this).closest('tr').css('background-color', '#ffffd5');
            } else {
                $(this).closest('tr').css('background-color', '');
            }
        });

        $(".showChild").click(function(e){
            var id=$(this).attr('data-id');
            $(".trpid"+id).toggle();
        });



        $('.grid-select-all').iCheck({checkboxClass:'icheckbox_minimal-blue'});

        $('.grid-select-all').on('ifChanged', function(event) {
            if (this.checked) {
                $('.grid-row-checkbox').iCheck('check');
            } else {
                $('.grid-row-checkbox').iCheck('uncheck');
            }
        });



        //刷新
        $('.grid-refresh').on('click', function() {
            $.pjax.reload('#pjax-container');
            toastr.success('刷新成功 !');
        });

        //搜索
        $('.shaixuan-filter-btn').unbind('click');
        $('.shaixuan-filter-btn').click(function (e) {
            if ($('#filter-box').is(':visible')) {
                $('#filter-box').addClass('hide');
            } else {
                $('#filter-box').removeClass('hide');
            }
        });
        @if($where)
        $('#filter-box').removeClass('hide');
        @endif

    });

    function showChild(id) {
        console.log(id);
        var child_length=$(".trpid"+id).length;
        if(child_length>0) return false;
        $.ajax({
            url:'/admin/category/getChildHtml',
            data:{id,id},
            type:'get',
            dataType:'json',
            success: function (m) {
                if(m.status==1){
                    $(".trpid"+id).remove();
                    $("#tr"+id).after(m.data.html);
                }else{

                }
            }
        });
    }


</script>